<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scaleble=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册商家</title>
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="css/首页/index.css">
</head>

<body>
    <header class="top_bg">
        <div class="h45 ac">
            <a class="left_btn"></a>
            注册商家
        </div>
    </header>

    <div class="lists">
        <div class="h45">
            <p>店铺编号 :</p>
            <span class="default-color marL20">1001</span>
        </div>
        <label class="h45">
            <p>店铺名称 :</p>
            <input type="text" placeholder="请输入名称">
        </label>
        <label class="h45 sel_style">
            <p>店铺类型 :</p>
            <select>
                <option value="0">请选择</option>
                <option value="1">美食</option>
                <option value="2">酒店</option>
                <option value="3">母婴</option>
                <option value="4">娱乐</option>
                <option value="5">美发</option>
                <option value="6">超市</option>
                <option value="7">特产</option>
                <option value="8">4S店</option>
                <option value="9">其他</option>
            </select>
            <i></i>
        </label>
        <div class="h45">
            <p>申请折扣率(%) :</p>
            <span class="default-color marL20">折扣须达到10%以上</span>
        </div>
        <div class="file_wrap">
            <div class="fileImg h45">
                <p>营业执照</p>
                <div>
                    <div class="file_style">
                        上传照片
                        <input type="file" class="file_input_1">
                    </div>
                </div>
            </div>
            <div class="showImg sg1">
                <img src="img/img.png">
            </div>
        </div>
        <div class="file_wrap">
            <div class="fileImg h45">
                <p>门面照片</p>
                <div>
                    <div class="file_style">
                        上传照片
                        <input type="file" class="file_input_2">
                    </div>
                </div>
            </div>
            <div class="showImg sg2">
                <img src="img/img.png">
            </div>
        </div>
        <div class="file_wrap">
            <div class="fileImg h45">
                <p>店内照片</p>
                <div>
                    <div class="file_style">
                        上传照片
                        <input type="file" class="file_input_3">
                    </div>
                </div>
            </div>
            <div class="showImg sg3">
                <img src="img/img.png">
            </div>
        </div>
        <div class="file_wrap">
            <div class="fileImg h45">
                <p>位置截图</p>
                <div>
                    <div class="file_style">
                        上传照片
                        <input type="file" class="file_input_4">
                    </div>
                </div>
            </div>
            <div class="showImg sg4">
                <img src="img/img.png">
            </div>
        </div>
    </div>

    <div class="lists marT10">
        <label class="h45 sel_style">
            <p>省份 :</p>
            <select>
                <option value="0">请选择</option>
                <option value="1">11111</option>
                <option value="3">22222</option>
            </select>
            <i></i>
        </label>
        <label class="h45 sel_style">
            <p>城市 :</p>
            <select>
                <option value="0">请选择</option>
                <option value="1">11111</option>
                <option value="3">22222</option>
            </select>
            <i></i>
        </label>
        <label class="h45 sel_style">
            <p>区/县 :</p>
            <select>
                <option value="0">请选择</option>
                <option value="1">11111</option>
                <option value="3">22222</option>
            </select>
            <i></i>
        </label>
        <div class="h45">
            <input type="text" placeholder="请输入详细地址" style="width:100%;">
        </div>
    </div>

    <div class="lists marT10">
        <label class="h45">
            <p>登录密码 :</p>
            <input type="text" placeholder="6位以上数字或字母">
        </label>
        <label class="h45">
            <p>确认密码 :</p>
            <input type="text" placeholder="6位以上数字或字母">
        </label>
        <label class="h45">
            <p>交易密码 :</p>
            <input type="text" placeholder="6位以上数字或字母">
        </label>
        <label class="h45">
            <p>确认密码 :</p>
            <input type="text" placeholder="6位以上数字或字母">
        </label>
        <label class="h45">
            <p>手机号码 :</p>
            <input type="number" placeholder="请输入手机号码">
            <p>
                <a href="javascript:;">获取验证码</a>
            </p>
        </label>
        <label class="h45">
            <p>
                <i>验证</i>码 :</p>
            <input type="text" placeholder="请输入验证码">
        </label>
        <label class="h45 check_box">
            <input type="checkbox">
            <i></i> 表示已经再公告中阅读，并接受全部条款
        </label>

        <div class="bottom_btn">
            <button type="button">提交</button>
        </div>
    </div>


    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(".file_input_1").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".sg1 img").attr("src", objUrl);
            }
        });
        $(".file_input_2").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".sg2 img").attr("src", objUrl);
            }
        });
        $(".file_input_3").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".sg3 img").attr("src", objUrl);
            }
        });
        $(".file_input_4").change(function () {
            var objUrl = getObjectURL(this.files[0]);
            // console.log("objUrl = " + objUrl);
            if (objUrl) {
                $(".sg4 img").attr("src", objUrl);
            }
        });
        //建立一個可存取到該file的url
        function getObjectURL(file) {
            var url = null;
            if (window.createObjectURL != undefined) { // basic
                url = window.createObjectURL(file);
            } else if (window.URL != undefined) { // mozilla(firefox)
                url = window.URL.createObjectURL(file);
            } else if (window.webkitURL != undefined) { // webkit or chrome
                url = window.webkitURL.createObjectURL(file);
            }
            return url;
        }
    </script>
</body>

</html>